<template>
  <div>
     <h1 v-text="msg" ref="msg"></h1>
     <button @click="showMsg" ref="button">点击我输出上方的DOM元素</button>
     <MySchool></MySchool>
     <hr>
     <!-- (3) 如果想要用传入的数值进行计算，一定要在前面加冒号(v-bind)
              因为这样里面的值就不再是字符串，而是js表达式(表达式那么就可以识别数字进行运算，这里没有运算那就是数值)
    -->
     <MyStudent ref="sch" name="Jace Zhou" sex="male" :age="22"></MyStudent>
  </div>
</template>

<script>
 import MySchool from './components/MySchool.vue'
 import MyStudent from './components/Student.vue'

  export default {
    // (1) 组件是一定要有名字的别忘了
      name:'App',
      components:{
        MySchool,
        MyStudent
      },
      data() {
        return {
           msg:'欢迎你'
        }
      },
      methods:{
        showMsg(){
          /**
           * (2) refs可以看作是和id同样的效果，可以用在标签或子组件上使用
           * 总结：
           *     目的：给元素或者子组件注册引用信息，ref就是referrence引用的意思
           * */ 
           console.log(this.$refs.msg);
           console.log(this.$refs.button);
           console.log(this.$refs.sch);
        }
      }
  }
</script>

<style>

</style>